﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
</head>
<script src="source/jquery17.js"></script>
<body>
	元素：<select id="item">
                            	<option value=0 selected>性别与文化程度</option>
                            	<option value=1>文化程度与收入水平</option>
                            	<option value=2>年龄与收入水平</option>
								<option value=3>收入与地区</option>
								<option value=4>文化程度与地区</option>
                            </select>
							年份：<select id="year">
                            	<option value=2014 selected>2014</option>
                            	<option value=2013>2013</option>
                            	<option value=2012>2012</option>
                            	<option value=2011>2011</option>
                            	<option value=2010>2010</option>
                            </select> <input type="button"   onclick="query();" value="确定"/>
    <!--Step:1 Prepare a dom for ECharts which (must) has size (width & hight)-->
    <!--Step:1 为ECharts准备一个具备大小（宽高）的Dom-->
	<div id="pie" style="width:100%;height:300px;border:1px solid #ccc; background-color:#1dd;"></div>
    <div id="main" style="width:100%;height:300px; border:1px solid #ccc;background-color:#ffd;"></div>
    <div id="mainMap" style="width:100%;height:350px; border:1px solid #ccc;background-color:green;"></div>
     <div id="mainMap1" style="width:100%;height:350px; border:1px solid #ccc;background-color:green;"></div>
     
    <!--Step:2 Import echarts.js-->
    <!--Step:2 引入echarts.js-->
    <script src="source/echarts.js"></script>
    <script src="source/data.js"></script>
    <script type="text/javascript">
	var myChart1,myChart2,myChart3;
	
    // Step:3 conifg ECharts's path, link to echarts.js from current page.
    // Step:3 为模块加载器配置echarts的路径，从当前页面链接到echarts.js，定义所需图表路径
	var option1  = {
    title : {
        text: '',
       // subtext: '纯属虚构',
        x:'center',
		textStyle:{color:'#008acd'}
    },
    tooltip : {
        trigger: 'item',
        //formatter: "{a}ww <br/>{b} : {c} ({d}%)"
		formatter: "{b} : {c} ({d}%)"
    },
    legend: {
	show:false,
        orient : 'vertical',
       x : 'left',
		//y:'left',
        data:[]
    },
    toolbox: {
        show : false,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            magicType : {
                show: true, 
                type: ['pie', 'funnel'],
                option: {
                    funnel: {
                        x: '25%',
                        width: '50%',
                        funnelAlign: 'left',
                        max: 1548
                    }
                }
            },
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    calculable : true,
    series : [
        {
            name:'男女比例',
            type:'pie',
            radius : '60%',
			selectedMode:'single',
            center: ['50%', '50%'],
			itemStyle : {
                normal : {
                    label : {
                        show : true
                    },
                    labelLine : {
                        show : true
                    }
                },
                emphasis : {
                    label : {
                        show : false
                    },
                    labelLine : {
                        show : false
                    }
                }
            },
            data:[ ]
        }
    ]
};
	var option2={
	title : {
        text: '',
       // subtext: '纯属虚构',
        x:'center',
		textStyle:{color:'#008acd'}
    },
                tooltip : {
                    trigger: 'items',
					formatter: "{b} : {c}"
                },
                legend: {
					show:false,
                    data:[]
                },
                toolbox: {
                    show : false,
                    feature : {
                        mark : {show: true},
                        dataView : {show: true, readOnly: false},
                        magicType : {show: true, type: ['line', 'bar']},
                        restore : {show: true},
                        saveAsImage : {show: true}
                    }
                },
                calculable : true,
                xAxis : [
                    {
					splitLine:false,
                        type : 'category',
                        data : []
                    }
                ],
                yAxis : [
                    {
					splitLine:false,
                        type : 'value',
                        //splitArea : {show : true}
						show:true
                    }
                ],
                series : [
                    {
                        //name:'小学',
                        type:'bar',
						itemStyle: {
							normal: {
								color: function(params) {
								// build a color map as your need.
								var colorList = [
								  '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
								   '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
								   '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0',
								   '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
								];
								return colorList[params.dataIndex]
							},
							label: {
								show: false,
								position: 'top',
								formatter: '{b}\n{c}'
							}
							}	
            },
                        data:[]
                    } 
                ]
            };
			var option3 = {
			title : {
				text: '',
				// subtext: '纯属虚构',
				x:'center',
				textStyle:{color:'#008acd'}
			},	
                tooltip : {
                    trigger: 'axis'
                },
                legend: {
                    data:[],
					//padding:[0,5,5,5],
					y:'bottom'
                },
                toolbox: {
                    show : false,
                    feature : {
                        mark : {show: true},
                        dataView : {show: true, readOnly: false},
                        magicType : {show: true, type: ['line', 'bar']},
                        restore : {show: true},
                        saveAsImage : {show: true}
                    }
                },
                calculable : true,
                xAxis : [
                    {
					splitLine:false,
                        type : 'category',
                        data : []
                    }
                ],
                yAxis : [
                    {
					splitLine:false,
                        type : 'value',
                        splitArea : {show : true}
                    }
                ],
				barCategoryGap:'50%',
                series : []
            };
			
			
	
    require.config({
        paths: {
            echarts: './source'
        }
    });
   
    // Step:4 require echarts and use it in the callback.
    // Step:4 动态加载echarts然后在回调函数中开始使用，注意保持按需加载结构定义图表路径
	 var ecConfig ;
	// alert(ecConfig);
	
    require(
        [
            'echarts',
            'echarts/chart/bar',
            'echarts/chart/line',
            'echarts/chart/pie'
			 
        ],
        function (ec) {
		 ecConfig = require('echarts/config');
		
		
		  
			initData();
			 
              myChart1 = ec.init(document.getElementById('pie'));
			  myChart2 = ec.init(document.getElementById('main'));
			   myChart3 = ec.init(document.getElementById('mainMap'));
           loadAll(itemIndex,2014);
           /* myChart1.on(ecConfig.EVENT.CLICK, function(e){
				alert(e);
			});      
            //--- 折柱 ---
            myChart2 = ec.init(document.getElementById('main'));
            myChart2.setOption(option2);
            myChart2.on(ecConfig.EVENT.CLICK, function(e){
				alert(e);
			});
            // --- 地图 ---
             myChart3 = ec.init(document.getElementById('mainMap'));
            myChart3.setOption(option3);
			*/
        }
		  

    );
	var h1 = new Array();
	var itemIndex = 0;
	var clickOneIndex = 0;
	function initData(){
		
		for(var i=0; i<data.length;i++){
			var h2 = new HashMap();
			for(var j=0;j<data[i].length;j++){
				h2.put(data[i][j].year,data[i][j].data);				
			}
			h1.push(h2);
		}
		 
	}
	function sumArr(arr){
		var sum=0;
		for(var i=0; i<arr.length;i++){
			sum+=arr[i];
		}
		return sum;
	}
	function loadAll(index,year){
	itemIndex = index;
	myChart1.clear();
	myChart2.clear();
	myChart3.clear();
		option1.legend.data = itemdata[index][0];
		option1.title.text = year+title[index];
			var option1Arr = new Array();
			for(var i=0;i<itemdata[index][0].length;i++){
				var obj = new Object();
				obj.name = itemdata[index][0][i];
				obj.value = sumArr(h1[index].get(year)[i]);
				option1Arr.push(obj);
			
			}
		 
		option1.series[0].data = option1Arr; 
		 myChart1.setOption(option1);
		 
		 option2.legend.data = itemdata[index][1];
		 option2.title.text = year+title1[index];
		  option2.xAxis[0].data = itemdata[index][1];
		  var option2Arr = new Array();
		  for(var i=0;i<itemdata[index][1].length;i++){
				
				var sum = 0;
				 
				for(var j=0; j<h1[index].get(year).length;j++){
					sum+=h1[index].get(year)[j][i];
				}
				option2Arr.push(sum);
			
			}
			option2.series[0].data = option2Arr; 
			myChart2.setOption(option2);
			
			var option3Arr1 = new Array();
			var option3Arr2 = new Array();
			 
			for(var i=0; i<itemdata[index][1].length;i++){
				var o = new Object();
				o.name = itemdata[index][1][i];
				o.type="bar";
				o.stack = "whcd";
				o.data = new Array();
				option3Arr1.push(o);
				
			}
			for(var i=year - 9; i<=year; i++){
			option3Arr2.push(i+"");
			if(h1[index].isSet(i)){
				for(var j=0; j<option3Arr1.length;j++){
				var sum = 0;
				for(var s=0; s<h1[index].get(i).length;s++){
					sum+=h1[index].get(i)[s][j]
				}
				option3Arr1[j].data.push(sum);
			
			}
			}else{
				for(var k=0; k<option3Arr1.length;k++){
				option3Arr1[k].data.push(0);
			
			}
			}
			
		
		}
		 option3.legend.data = itemdata[index][1];
		 option3.title.text = option3Arr2[0]+"~"+option3Arr2[option3Arr2.length - 1]+title1[index];
		  option3.xAxis[0].data = option3Arr2;
			option3.series = option3Arr1; 
			myChart3.setOption(option3);
	myChart1.on(ecConfig.EVENT.CLICK, function(e){
				click1(year,itemIndex,e);
			});  
myChart2.on(ecConfig.EVENT.CLICK, function(e){
				click2(year,itemIndex,e);
			});      			
	
	}
	function click1(year,index,e){
	clickOneIndex = e.dataIndex;
	var o2 = myChart2.getOption();
	var o3 = myChart3.getOption();
	o2.series[0].data = h1[index].get(year)[e.dataIndex];
	o2.title.text = year+title2[index][0]+e.name+title2[index][1];

	myChart2.clear();
	 
	myChart2.setOption(o2);
	for(var j=0; j<o3.series.length;j++){
		o3.series[j].data = [];
	}
	 for(var i=year - 9; i<=year; i++){
			 
			if(h1[index].isSet(i)){
				for(var j=0; j<o3.series.length;j++){
				 
				 
				o3.series[j].data.push(h1[index].get(i)[e.dataIndex][j]);
			
			}
			}else{
				for(var k=0; k<o3.series.length;k++){
				o3.series[k].data.push(0);
			
			}
			}
			
		
		}
		o3.title.text = o3.xAxis[0].data[0]+"~"+o3.xAxis[0].data[o3.xAxis[0].data.length - 1]+title2[index][0]+e.name+title2[index][1];
		  
		myChart3.clear();
	 
	myChart3.setOption(o3);
	
	}
	function click2(year,index,e){
		var o3 = myChart3.getOption();
		o3.legend.data = [];
		o3.series = [];
		o3.legend.data.push(e.name);
		var obj = new Object();
		obj.name = e.name;
		obj.type = "bar";
		obj.data = new Array();
		for(var i=year - 9; i<=year; i++){
			 
			if(h1[index].isSet(i)){
				 
				 
				 
				obj.data.push(h1[index].get(i)[clickOneIndex][e.dataIndex]);
			
			 
			}else{
			 obj.data.push(0);
			}
			
		
		}
		o3.series.push(obj);
		//o3.title.text = o3.xAxis[0].data[0]+"~"+o3.xAxis[0].data[o3.xAxis[0].data.length - 1]+"年"+title1[index]+"["+e.name+"]人口分布情况";
		 
		myChart3.clear();
	 
	myChart3.setOption(o3);
	
	}
	function query(){
		var item = parseInt($("#item").val());
		var year = parseInt($("#year").val());
		loadAll(item,year);
	}
	window.onresize = function () {
                myChart1.resize();
                myChart2.resize();
				 myChart3.resize();
            }
			 
    </script>
</body>
</html>